<template>
  <q-drawer
    class="aside-page main-page-aside-drawer"
    v-model="menuStore.showMenu"
    :width="220"
  >
    <q-scroll-area class="fit">
      <div class="main-page-aside-head-logo-wrapper">
        <q-toolbar-title
          v-if="$q.screen.gt.xs"
          shrink
          class="row items-center no-wrap"
          style="cursor: pointer"
          @click="$router.push({ path: '/v2/set-project' })"
        >
          <svg-icon
            icon-class="dna"
            style="color: #ffffff; font-size: 36px"
          ></svg-icon>
          <span
            style="
              font-size: 24px;
              font-weight: 500;
              color: #ffffff;
              margin-left: 12px;
            "
            >Gene Tech</span
          >
        </q-toolbar-title>
      </div>
      <q-list
        style="padding: 4px 8px; box-sizing: border-box; user-select: none"
      >
        <div v-for="(item, index) in menuList" :key="index">
          <q-item
            v-if="!item?.children && !item?.currentProject"
            :to="{ name: item.path_name, params: { project_id: projectId } }"
            style="margin: 4px 0; border-radius: 2px"
            clickable
            class="font-Pf-medium-16 aside-page-list-item"
            active-class="text-white active-list-item"
            v-ripple
            :active="router.currentRoute.value.name.startsWith(item.path_name)"
          >
            <q-item-section avatar class="text-white" style="padding-right: 0">
              <img
                style="width: 18px; vertical-align: middle; margin-right: 16px"
                src="/svgs/projectSet.svg"
              />
            </q-item-section>

            <q-item-section>
              <q-item-label>{{ item.label }}</q-item-label>
            </q-item-section>
          </q-item>

          <q-expansion-item
            v-if="item.children && !item.currentProject"
            class="font-Pf-medium-16 parent-list-item aside-page-list-item"
            :content-inset-level="0.3"
            :default-opened="index <= 2"
            :header-style="{
              margin: '4px 0',
            }"
          >
            <template v-slot:header>
              <div style="display: flex; align-items: center; width: 100%">
                <img
                  style="width: 18px; vertical-align: middle; margin-right: 16px"
                  :src="item.icon"
                />
                <p style="margin: 0">{{ item.label }}</p>
              </div>
            </template>
            <div
              :class="{
                'list-items-active': router.currentRoute.value.name.startsWith(
                  item.name
                ),
              }"
            >
              <q-item
                :active="
                  router.currentRoute.value.name.startsWith(childItem.path_name)
                "
                style="font-weight: 500; padding: 0"
                v-for="(childItem, index) in item.children"
                :key="index"
                @click="topage(childItem.path_name)"
                v-ripple
                clickable
                active-class="text-white active-list-item"
                class="child-list-item aside-page-list-item"
              >
                <q-item-section class="children-item-section">
                  <q-item-label>
                    <div class="child-label">
                      {{ childItem.label }}
                    </div>
                  </q-item-label>
                </q-item-section>
              </q-item>
            </div>
          </q-expansion-item>
        </div>
      </q-list>
    </q-scroll-area>
  </q-drawer>
</template>
<script setup>

import back from 'assets/dataSet/back.png';
import { ref, watch, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useMenuStore } from 'src/stores/menu';
import { dataSetStore } from 'src/stores/dataSet';
import { useCurrentProjectStore } from 'src/stores/current-project';
import { isMemberInterface } from 'src/api/user';
import { ElMessage } from 'element-plus';
import { systemMenu } from 'src/stores/menu';
let menuStore = useMenuStore();
let projectStore = useCurrentProjectStore();
let menuList = menuStore.menuItems;
const store=dataSetStore()

watch(
  () => menuStore.menuItems,
  (newValue, oldValue) => {
    menuList = newValue;
  }
);

const dialogVisible = ref(false);
const router = useRouter();
const isMounted = ref(false);
let options = ref(['Google', 'Facebook', 'Twitter', 'Apple', 'Oracle']);

onMounted(() => {
  if (!isMounted.value) {
    menuStore.restoreMenuItems();
    const isAdmin = JSON.parse(localStorage.getItem('user') || '{}')[
      'is_admin'
    ];
    if (isAdmin) {
      menuStore.pushMenuItems(systemMenu[0]);
    }
    isMounted.value = true;
  }
});

function topage(pathName) {
  let projectId = router.currentRoute.value.params.project_id || projectStore.project_id;
  if (pathName.includes('system')) {
    router.push({ name: pathName });
  } else if (projectId) {
    router.push({ name: pathName, params: { project_id: projectId } });
  } else {
    projectStore.setBlockVisible(true);
  }
  store.setPageSizeData(10)
  store.setPageData(1)
  store.setQuickStart({tipsPopup:false,quickFlow:false,flowNumber:0})
}

function goBackPage(id) {
  isMember(id);
}

function isMember(id) {
  isMemberInterface(id)
    .then((res) => {
      const menuList = JSON.parse(JSON.stringify(menuStore.allMenuList));
      const current = menuList.filter((item) => item.id === id); //当前项目
      const removeCurrntProject = menuList.filter((item) => item.id !== id); //除了当前项目外全部的其他项目
      let obj = {
        title: current[0].title,
        currentProject: true,
        name: 'model',
        children: removeCurrntProject,
      };
      menuStore.replaceCurrentMenuItem(obj);
      menuStore.setCurrentProject(obj);
      let userInfo = JSON.parse(localStorage.getItem('user'));
      userInfo['status'] = res.data.status;
      localStorage.setItem('user', JSON.stringify(userInfo));
      router.push({ name: 'project-detail', params: { project_id: id } });
    })
    .catch((error) => {
      console.log('error', error);
      ElMessage.error('获取项目创建人或管理员接口报错！');
    });
}

function returnBack() {
  router.push({ path: '/' });
  menuStore.deleteMenuItems();
}
</script>

<style lang="scss">
@import 'src/css/designerStyles/mixin.scss';

.aside-page-list-item {
  min-height: 40px;
}

.aside-page {
  .q-item__section--avatar i,
  svg {
    color: #ffffff;
    font-size: 17px;
    min-width: 20px;
  }

  .q-item__section--avatar {
    min-width: 20px;
  }

  .q-item__section--side > .q-icon {
    font-size: 18px;
  }
}

.main-page-aside-drawer {
  background: $primary_beta;
  color: #ffffff;

  .main-page-aside-head-logo-wrapper {
    height: 78px;
    @include flex-center;
  }

  .list-items-active {
    border-radius: 2px;
    background: #4966e4;
  }

  a:active,
  a:hover {
    color: #ffffff !important;
  }

  .q-expansion-item .q-item {
    min-height: 40px;
  }

  .active-list-item {
    background: #647ff4;
  }

  .q-item__section--side > .q-icon.q-expansion-item__toggle-icon {
    color: #ffffff;
    font-size: 20px;
    position: relative;
    left: 4px;
  }

  .child-label {
    margin-left: 58px;
  }

  .parent-list-item {
    .relative-position {
      padding: 0 !important;
    }
  }
}
</style>
